<template>
    <el-text type="primary" size="large">
        <h1 class="my-h1">推荐条目管理</h1>
    </el-text>



    <el-table :data="recommendData" style="width: 100%">
        <el-table-column fixed prop="rid" label="推荐ID" width="80" />
        <el-table-column label="商品名称" width="200">
            <template #default="scope">
                {{ getGoodsName(scope.row.gid) }}
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200" />
        <el-table-column prop="updateTime" label="最后一次更新时间" width="200" />
        <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
                <el-button plain type="danger" size="small" @click="deleteRecommend(scope.row)">移除推荐</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'

axios.defaults.baseURL = '/api'

export default {
    data() {
        return {
            recommendData: [],
            goodsList: [],
        }
    },
    created() {
        this.getRecommendData()
        this.getGoodsList()
    },
    methods: {
        getRecommendData() {
            axios.get('/recommend')
                .then(result => {
                    if (result.data.code === 1) {
                        this.recommendData = result.data.data;
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
        deleteRecommend(recommend) {
            let arr = [];
            arr.push(recommend.rid);
            axios.delete('/recommend/' + arr)
                .then(result => {
                    if (result.data.code === 1) {
                        ElMessage.success("删除成功");
                        this.getRecommendData();
                    } else {
                        ElMessage.error("删除失败");
                        console.log(result.data);
                    }
                })
                .catch(err => {
                    console.log(err);
                    if (err.response.status === 500) {
                        ElMessage.info("后端服务器出现异常");
                        return;
                    }
                    ElMessage.error("删除失败！！！");
                })
        },
        getGoodsList() {
            axios.get('/recommend/goodsList')
                .then(result => {
                    if (result.data.code === 1) {
                        this.goodsList = result.data.data;
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
        getGoodsName(gid) {
            for (const k in this.goodsList) {
                if (this.goodsList[k].gid === gid) {
                    return this.goodsList[k].name;
                }
            }
            return '-';
        }
    }
}
</script>


<style scoped>
.my-h1 {
    color: #000;
    text-align: center;
    font-size: 28px;
    margin: 10px 0;
}
</style>